<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:ctg="http://www.crotouristguide.com/taglib"
	xmlns:c="http://java.sun.com/jstl/core">
<body>
<ui:component>

	<script type="text/javascript">
		jQuery(document).ready(function($) {
		 	 jQuery('#gallery a').lightBox({
				imageLoading: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-ico-loading.gif',
				imageBtnClose: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-close.gif',
				imageBtnPrev: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-prev.gif',
				imageBtnNext: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-btn-next.gif',
				imageBlank: '#{application.contextPath}/resources/plugins/lightbox/images/lightbox-blank.gif'
		 	 });		 	 
		});
	</script>

	<script type="text/javascript">
		jQuery(document).ready(function($) {
			jQuery('#loader').image('#{flickr[0].smallUrl}',#{width},#{height},'');
		});
	</script>
 
	<div id="gallery">
	<ul>
		<c:forEach items="#{flickr}" var="p" varStatus="status">
			<li><h:outputLink value="#{p.mediumUrl}"
				title="Flickr: #{p.title}">
				<f:subview rendered="#{status.index == 0}">
					<div id="loader" class="loading" align="center"></div>
				</f:subview>
			</h:outputLink></li>
		</c:forEach>
		<h:graphicImage value="/resources/images/no_image.png"  alt="#{messages['label.image.alt']}"
			rendered="#{flickr.size() == 0}"></h:graphicImage>

	</ul>
	</div>

</ui:component>
</body>
</html>
